<template>
  <el-row class="home-container">
    <el-col class="card-container" style="width:400px">
      <card class="card-item" cardName="日历" cardWidth="400">
        <div slot="content" class="calendar-container">
          <calendar></calendar>
        </div>
      </card>
    </el-col>
    <el-col class="card-container" style="width:500px">
      <card class="card-item" card-name="按分类对文章进行统计" card-width="500">
        <div slot="content" class="chart-item">
          <x-chart id="categoryChart" ref="categoryChart" class="high" :option="optionOfCategory"></x-chart>
        </div>
      </card>
      <card class="card-item" card-name="按标签对文章进行统计" card-width="500">
        <div slot="content" class="chart-item">
          <x-chart id="tagChart" ref="tagChart" class="high" :option="optionOfTag"></x-chart>
        </div>
      </card>
    </el-col>
    <el-col class="card-container" style="width:400px">
      <Card class="card-item statistics-card" cardName="数据统计" cardWidth="400">
        <tool-bar slot="tool" class="toolbar">
          <ul class="choice-box clear-fix" slot="fixationContainer">
            <li :class="dataType == 3? 'choice-item is-active': 'choice-item'" @click="dataType=3">总计</li>
            <li :class="dataType == 2? 'choice-item is-active': 'choice-item'" @click="dataType=2">本月</li>
            <li :class="dataType == 1? 'choice-item is-active': 'choice-item'" @click="dataType=1">本日</li>
          </ul>
        </tool-bar>
        <div slot="content">
          <router-link tag="div" class="show-item" to="/dashboard/article">
            <div class="show-item-left">
              <i class="iconfont icon-16 article-icon"></i>
            </div>
            <div class="show-item-right">
              <h2 class="statistics-num">{{statisticsData.article}}</h2>
              <span class="statistics-type">文章</span>
            </div>
          </router-link>
          <router-link tag="div" class="show-item" to="/dashboard/comment">
            <div class="show-item-left">
              <i class="iconfont icon-pinglun comment-icon"></i>
            </div>
            <div class="show-item-right">
              <h2 class="statistics-num">{{statisticsData.comment}}</h2>
              <span class="statistics-type">评论</span>
            </div>
          </router-link>
          <router-link tag="div" class="show-item" to="/dashboard/category">
            <div class="show-item-left">
              <i class="iconfont icon-fenlei category-icon"></i>
            </div>
            <div class="show-item-right">
              <h2 class="statistics-num">{{statisticsData.category}}</h2>
              <span class="statistics-type">分类</span>
            </div>
          </router-link>
          <router-link tag="div" class="show-item" to="/dashboard/tag">
            <div class="show-item-left">
              <i class="iconfont icon-biaoqian tag-icon"></i>
            </div>
            <div class="show-item-right">
              <h2 class="statistics-num">{{statisticsData.tag}}</h2>
              <span class="statistics-type">标签</span>
            </div>
          </router-link>
        </div>
      </Card>
    </el-col>
  </el-row>
</template>

<script>

  import XChart from 'components/common/chart/Chart';
  import Calendar from 'components/common/calendar/Calendar';
  import Card from 'components/common/card/Card';
  import ToolBar from 'components/content/toolbar/ToolBar';


  import {showDataByType, showArticleCountSortedByCategory,
    showArticleCountSortedByTag} from "../../network/viewsRequest/home";

  export default {
    name: 'HomeView',
    data() {
      return {
        dataType: 1, // 1显示本日数据，2显示本月数据，3显示全部数据
        statisticsData: { // 右边统计栏中显示的数据
          article: 0,
          tag: 0,
          category: 0,
          comment: 0,
        },
        optionOfCategory: {
          chart: {
            type: 'pie',
            height: 250,
            width: 460
          },
          title: {
            text: null
          },
          plotOptions: {
            pie: {
              showInLegend: true,
              cursor: "pointer",
            }
          },
          series: [{
            name: '文章数量',
            data: []
        }],
        },
        optionOfTag: {
          chart: {
            type: 'pie',
            height: 250,
            width: 460
          },
          title: {
            text: null
          },
          plotOptions: {
            pie: {
              showInLegend: true,
              cursor: "pointer",
              // events: {
              //   click: function(event) {
              //     console.log(event.point.url);
              //   }
              // }
            }
          },
          series: [{
            name: '文章数量',
            data: [
              {name:'java', y:30, url:'http://www.baidu.com'},
              {name:'springboot', y:21, url:'http://www.google.com'},
              {name:'vue', y:22, url:'http://www.sohu.com'},
              {name:'h5c3', y:5, url:'http://www.sina.com.cn'},
              {name:'redis', y:2, url:'http://www.sina.com.cn'},
            ]
          }],
        }
      }
    },
    watch: {
      dataType: function(newVal) {
        this.showDataByType(newVal);
      }
    },
    methods: {
      /**
       * 获取页面右边统计数字的数据
       * @param type
       */
      showDataByType(type) {
        showDataByType(type).then(res => {
          if (res.code == 1) {
            this.statisticsData = res.data;
          } else {
            this.statisticsData = {
              article: 0,
              tag: 0,
              category: 0,
              comment: 0,
            }
          }
        })
      },
      /**
       * 获取页面中间的按照分类对文章进行统计的数据
       */
      showArticleCountSortedByCategory() {
        showArticleCountSortedByCategory().then(res => {
          if (res.code == 1) {
            this.optionOfCategory.series[0].data = res.data;
            // 重新加载数据
            this.$refs.categoryChart.chart();
          } else {
            this.optionOfCategory.series[0].data = [];
            this.$refs.categoryChart.chart();
          }
        })
      },
      showArticleCountSortedByTag() {
        showArticleCountSortedByTag().then(res => {
          if (res.code == 1) {
            this.optionOfTag.series[0].data = res.data;
            // 重新加载数据
            this.$refs.tagChart.chart();
          } else {
            this.optionOfTag.series[0].data = [];
            this.$refs.tagChart.chart();
          }
        })
      }
    },
    mounted() {
      this.showDataByType(1);
      this.showArticleCountSortedByCategory();
      this.showArticleCountSortedByTag();
    },
    components: {
      Card,
      XChart,
      Calendar,
      ToolBar
    }
  }
</script>

<style scoped>
  .home-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .home-container .calendar-container {
    display: inline-block;
    width: 100%;
    height: 600px;
  }
  .card-container {
    display: flex;
    flex-direction: column;
  }
  .card-item {
    margin: 30px auto auto auto;
    /*margin-left: 30px;*/
  }
  .statistics-card {
    position: relative;
  }
  .toolbar {
    top: 7px;
    right: 7%;
  }
  .show-item {
    width: 90%;
    height: 80px;
    line-height: 80px;
    background-color: #fff;
    margin: 0 auto 30px auto;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    color: #666;
  }
  .show-item:last-child {
    margin-bottom: 0;
  }
  .show-item:hover {
    color: white;
    background-color: #6d7ee9;
  }
  .show-item .article-icon,
  .show-item .category-icon,
  .show-item .tag-icon,
  .show-item .comment-icon {
    display: inline-block;
    font-size: 40px;
    margin-left: 20px;
  }
  .show-item .statistics-num {
    display: inline-block;
    font-size: 50px;
    margin-right: 10px;
  }
  .show-item .statistics-type {
    display: inline-block;
    font-size: 18px;
    margin-right: 30px;
  }
  .choice-box {
    list-style: none;
    text-align: right;

  }
  .choice-box>.choice-item {
    float: right;
    width: 60px;
    height: 40px;
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    border: 1px solid #ccc;
    font-size: 14px;
  }
  .choice-box>.choice-item:first-child {
    border-left:none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .choice-box>.choice-item:last-child {
    border-right:none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .choice-box>.is-active {
    background-color: #6d7ee9;
    color: white;
  }


</style>